<template>
  <div class="data-breach-groups">
    <a-card
      class="flex-1 rounded overflow-x-auto"
      :body-style="{ padding: '12px 16px', height: '100%' }"
      :bordered="false"
    >
      <div class="mb-2 flex justify-end">
        <a-button type="primary" icon="plus" class @click="openDrawer('add')">{{
          $t("system.databreachgroups.add")
        }}</a-button>
      </div>
      <a-table
        ref="table"
        size="middle"
        class="h-full"
        :dataSource="dataSource"
        :pagination="{ total }"
        @change="getList"
        :loading="listLoading"
      >
        <a-table-column
          key="ApprovalName"
          data-index="ApprovalName"
          width="200px"
          :title="$t('system.databreachgroups.table.name')"
          align="center"
        />
        <a-table-column
          key="ApprovalAlias"
          data-index="ApprovalAlias"
          width="200px"
          :title="$t('system.databreachgroups.table.nickname')"
          align="center"
        />
        <a-table-column
          key="ApprovalCreatetime"
          data-index="ApprovalCreatetime"
          width="200px"
          :title="$t('user.verification-code.required111566131')"
          align="center"
        />
        <a-table-column
          key="ApprovalUserList"
          :title="$t('user.v133')"
          width="200px"
          align="center"
        >
          <template slot-scope="record">
            <template v-if="record.ApprovalUserList.length > 0">
              <a-tag
                v-for="tag in record.ApprovalUserList"
                :key="tag.value"
                color="green"
                >{{ tag.label }}</a-tag
              >
            </template>
          </template>
        </a-table-column>
        <a-table-column
          key="action"
          :title="$t('app.setting.othersettings')"
          align="center"
        >
          <template slot-scope="text, record">
            <span>
              <a-button type="link" block @click="openDrawer('edit', record)">{{
                $t("user.verification-code.required11156611014")
              }}</a-button>
              <a-popconfirm
                :title="$t('user.verification-code.required111566110577225')"
                :ok-text="$t('user.v15')"
                :cancel-text="$t('user.email.required11')"
                @confirm="() => del(record.Id)"
              >
                <a-button type="link" block>{{
                  $t("menu.exception.trigger")
                }}</a-button>
              </a-popconfirm>
            </span>
          </template>
        </a-table-column>
      </a-table>
    </a-card>
    <a-drawer
      :title="drawerTitle"
      :visible="visible"
      @close="close"
      :width="500"
    >
      <a-form :form="form">
        <a-form-item :label="$t('system.databreachgroups.drawer.form.name')">
          <a-input
            v-decorator="[
              'ApprovalName',
              {
                rules: [
                  {
                    required: true,
                    message: $t(
                      'system.databreachgroups.drawer.form.name.placeholder'
                    ),
                  },
                ],
              },
            ]"
            :placeholder="
              $t('system.databreachgroups.drawer.form.name.placeholder')
            "
          />
        </a-form-item>
        <a-form-item :label="$t('user.v136')">
          <a-input
            v-decorator="[
              'ApprovalAlias',
              { rules: [{ required: true, message: $t('user.v137') }] },
            ]"
            :placeholder="$t('user.v137')"
          />
        </a-form-item>
        <a-form-item :label="$t('user.v138')">
          <a-select
            mode="multiple"
            v-decorator="[
              'ApprovalUser',
              { rules: [{ required: true, message: $t('user.v139') }] },
            ]"
            :placeholder="$t('user.v139')"
            option-filter-prop="children"
            :filter-option="filterOption"
            show-search
            @search="getUserlist"
            @change="$forceUpdate()"
          >
            <a-select-option
              v-for="item in userList"
              :value="item.value"
              :key="item.value"
              >{{ item.label }}
            </a-select-option>
          </a-select>
        </a-form-item>
      </a-form>
      <div
        class="absolute right-0 bottom-0 w-full border-t border-[#e9e9e9] px-4 py-[10px] bg-white text-left z-1 flex justify-center"
      >
        <a-button
          :style="{ marginRight: '20px' }"
          class="w-[200px]"
          @click="close"
          >{{ $t("user.email.required11") }}</a-button
        >
        <a-button
          :loading="loading"
          class="w-[200px]"
          type="primary"
          @click.native.prevent="submit()"
        >
          <span v-if="!loading">{{ $t("app.setting.weakmode") }}</span>
          <span v-else
            >{{ $t("user.verification-code.required1115661107") }}...</span
          >
        </a-button>
      </div>
    </a-drawer>
  </div>
</template>

<script>
import { userQuerySearch } from "@/api/common/form";
import { createGroups, delGroupsList, getGroupsList } from "@/api";
export default {
  name: "dataBreachGroups",
  data() {
    return {
      drawerTitle: "",
      visible: false,
      form: this.$form.createForm(this),
      total: 0,
      dataSource: [],
      listLoading: false,
      userList: [],
      groupsId: undefined,
      loading: false,
    };
  },
  created() {
    this.getList();
  },
  methods: {
    async openDrawer(type, record) {
      this.groupsId = undefined;
      this.drawerTitle = this.$t(`system.databreachgroups.drawer.${type}`);
      await this.getUserlist();
      if (record) {
        this.groupsId = record.Id;
        let arr = [];
        record.ApprovalUserList.forEach((item) => {
          arr.push(parseInt(item.value));
        });
        setTimeout(() => {
          this.form.setFieldsValue({ ...record, ApprovalUser: arr });
        });
      }
      this.visible = true;
    },
    close() {
      this.visible = false;
      this.form.resetFields();
    },
    async getList(pagination) {
      this.listLoading = true;
      try {
        const { data } = await getGroupsList({
          page: pagination?.current || 1,
          pageSize: this.pagination?.pageSize || 10,
          ApprovalType: 2,
        });
        this.dataSource = data.Lists || [];
        this.total = data.Total;
      } catch (error) {
        this.$message.error(error);
      } finally {
        this.listLoading = false;
      }
    },
    // 实时查询用户列表
    async getUserlist(value) {
      const { data } = await userQuerySearch({
        YtAdminName: value,
        types: 1,
      });
      this.userList = data;
    },
    // 提交
    submit() {
      const {
        form: { validateFields },
      } = this;
      this.loading = true;
      validateFields(async (err, values) => {
        if (!err) {
          try {
            values.ApprovalUser = values.ApprovalUser.join(",");
            const res = await createGroups({
              ...values,
              ApprovalType: 2,
              Id: this.groupsId,
            });
            this.getList();
            this.$message.success(
              this.$t("user.verification-code.required111566110577308")
            );
            this.close();
          } catch (error) {
            this.$message.error(error);
          } finally {
            this.loading = false;
          }
        } else {
          setTimeout(() => {
            this.loading = false;
          }, 600);
        }
      });
    },
    filterOption(input, option) {
      return (
        option.componentOptions.children[0].text
          .toLowerCase()
          .indexOf(input.toLowerCase()) >= 0
      );
    },
    async del(Id) {
      await delGroupsList({ Id });
      this.getList();
      this.$message.success(
        this.$t("user.verification-code.required111566110577133")
      );
    },
  },
};
</script>

<style lang="less" scoped>
</style>